/*
 * @Date: 2022-03-29 15:54:31
 * @LastEditors: fenglan
 * @LastEditTime: 2022-03-29 21:52:26
 * @FilePath: /payment/pay/src/components/TenantCard1/index.jsx
 */
import React from 'react'
import {Row,Col,Card} from 'antd'
import styles from './index.module.css'
export default function TenantCard1() {
  const data = [
    {title:'商户总余额',type:'元',price:'501...',key:'1'},
    {title:'商户总可用余额',type:'元',price:'11097',key:'2'},
    {title:'银行风控金额',type:'元',price:'0',key:'3'},
    {title:'商户透支额度',type:'元',price:'11097',key:'4'},
    {title:'订单金额',type:'元',price:'11097',key:'5'},
  ]
  const data1 = [
    {title:'今日总充值金额',type:'元',price:'501...',key:'1'},
    {title:'今日总充值手续费',type:'元',price:'11097',key:'2'},
    {title:'今日代付总金额',type:'元',price:'0',key:'3'},
    {title:'今日代付总笔数',type:'元',price:'11097',key:'4'},
    {title:'今日代付总手续费',type:'元',price:'11097',key:'5'},
  ]
  const data2 = [
    {title:'昨日总充值金额',type:'元',price:'501...',key:'1'},
    {title:'昨日总充值手续费',type:'元',price:'11097',key:'2'},
    {title:'昨日代付总金额',type:'元',price:'0',key:'3'},
    {title:'昨日代付总笔数',type:'元',price:'11097',key:'4'},
    {title:'昨日代付总手续费',type:'元',price:'11097',key:'5'},
  ]
  return (
    <div>
        <Row gutter={16} className={styles.body}>
          {data.map(item=>
          <Col span={4} key={item.key}>
            <Card title={item.title} bordered hoverable className={styles.item1}  extra={<span className={styles.extra}>{item.type}</span>}>
            <span className={styles.font}>{item.price}</span>
          </Card>
          </Col>)}
      </Row>
      <Row gutter={16} className={styles.body}>
      {data1.map(item=>
          <Col span={4} key={item.key}>
            <Card title={item.title} bordered hoverable className={styles.item4}  extra={<span className={styles.extra}>{item.type}</span>}>
            <span className={styles.font}>{item.price}</span>
          </Card>
          </Col>)}
      </Row>
      <Row gutter={16} className={styles.body}>
      {data2.map(item=>
          <Col span={4} key={item.key}>
            <Card title={item.title} bordered hoverable className={styles.item3}  extra={<span className={styles.extra}>{item.type}</span>}>
            <span className={styles.font}>{item.price}</span>
          </Card>
          </Col>)}
      </Row>
    </div>
  )
}
